<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置分组 -->
      <i class="el-icon-speed" title="区组">区组</i>
      <el-select
        v-model="CLIENT_NAME"
        placeholder="请选择区组"
        @change="groupchange"
      >
        <el-option
          v-for="(item, index) in groupingList"
          :value="item.CLIENT_NO"
          :label="item.CLIENT_NAME"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置道路 -->
      <!-- <i class="el-icon-speed" title="道路名称">道路名称</i>
      <el-select
        v-model="RoadName"
        placeholder="请选择道路"
        @change="$forceUpdate()"
        ref="RoadName"
      >
        <el-option
          v-for="(item, index) in roadList"
          :value="item.RoadName"
          :label="item.RoadName"
          :key="index"
        ></el-option>
      </el-select> -->
      <!-- 设置时间 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        v-model="selectDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>

      <!-- 道路播放 -->
      <!-- <span class="buttonI" title="道路播放" @click="start">道路播放</span> -->
      <!-- 全区播放 -->
      <span class="buttonI" title="全区播放" @click="startAll">全区播放</span>
      <!-- 轨迹点数据 -->
      <span class="buttonI" title="轨迹点数据" @click="openDataList"
        >轨迹点数据</span
      >
      <!-- 图片导出 -->
      <span class="buttonI" title="图片导出" @click="savepic">图片导出</span>

      <!-- <div class="aroundtopdown"> -->
      <div class="aroundtopcontent">
        <!-- 设置道路 -->
        <i class="el-icon-speed" title="道路名称">道路名称：</i>
        <el-select
          v-model="RoadName"
          placeholder="请选择道路"
          @change="$forceUpdate()"
          ref="RoadName"
        >
          <el-option
            v-for="(item, index) in roadList"
            :value="item.RoadName"
            :label="item.RoadName"
            :key="index"
          ></el-option>
        </el-select>
        <!-- 道路播放 -->
        
        <span class="buttonII" title="道路播放" @click="start">道路播放</span>
        <!-- 轨迹偏移设置 -->
        <i class="el-icon-speed" title="轨迹偏移设置">轨迹偏移设置：</i>
        <el-checkbox class="el-checkbox-show" v-model="linevalue.grcheck"
          >道路</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.grvalue"
        />
        <span
          style="
            color: #007acc;
            font-size: 15px;
            margin-right: 10px;
            font-weight: bold;
          "
          title="线粗"
          >线粗</span
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.cxvalue"
        />
      </div>
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <!-- 数据列表 -->
    <el-dialog
      title="点位数据列表"
      :visible.sync="dataListDialog"
      width="55%"
      class="dialogchild"
    >
      <el-form class="dialogform">
        <i class="el-icon-speed" title="人员姓名">人员姓名</i>
        <el-select
          v-model="LICENSE_PLATE"
          placeholder="请选择人员姓名"
          @change="carchange"
        >
          <el-option
            v-for="(item, index) in carList"
            :value="item.NAME"
            :label="item.NAME"
            :key="index"
          ></el-option>
        </el-select>
        <el-table
          :data="onecardataList"
          style="width: 150%"
          fit
          max-height="550"
          highlight-current-row
        >
          <!-- {"Lng":"117.449241907762","Lat":"38.8629691205361","Speed":"50","Direction":"西","GpsTime":"2020/12/21 9:16:47"}, -->
          <el-table-column
            
            prop="NAME"
            label="人员姓名"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            
            prop="WorkerType"
            label="工人类型"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            
            prop="ORIENTATION_TIME"
            label="定位时间"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            
            prop="NewLng"
            label="经度"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            
            prop="NewLat"
            label="纬度"
            width="160"
            align="center"
          ></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '@/common/js/date.js'

import MapStr from '@/main.js'
import DirectionImg from '@/assets/img/playback/direction.png'
import html2canvas from 'html2canvas';
import { newMap } from '@/common/js/map.js'
export default {
  data () {
    return {
      setSlider: {
        max: 100,
        value: 0,
        step: 1
      },
      Data: {
        arrayVillageRoad: []
      },
      MapV: {
        roadLayer: null,
        roadNameLayer: null,
        dataSetWorkerLine: null
      },
      map: null,
      // hshmap: new Map(),
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      dataList: [],
      dataCurrentIndex: 0,
      VID: 0,
      setTime: {
      },
      selectDay: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      groupingList: [],
      carList: [],
      onecardataList: [],
      CLIENT_NAME: '',
      RoadName: '',
      LICENSE_PLATE: '',
      roadList: [],
      workerList: [],
      linevalue: {
        grvalue: 2,
        grcheck: true,
        cxvalue: 5
      }
    }
  },
  created () {
    this.VID = this.$route.query.VID
    // var now   = new Date();
    // now.setDate(now.getDate() - 1)
    // var monthn = now.getMonth()+1;
    // var yearn  = now.getFullYear();
    // var dayn = now.getDate();
    // this.selectDay = yearn+"-"+monthn+"-"+dayn;
    this.CLIENT_NAME = localStorage.getItem('CLIENT_NO')
  },
  mounted () {
    // 显示地图 
    this.mapShow() 
    this.getGroupingList()
    this.dataSearch()
    // this.getVillageRoadInfo()
  },
  methods: {
    dataSearch () {
      this.getRoadList(this.CLIENT_NAME);
      // this.getWorkerList(this.CLIENT_NAME);
    },
    groupchange (val) {
      this.RoadName = ''
      this.LICENSE_PLATE = ''
      this.getRoadList(val);
      // this.getWorkerList(val);
    },
    carchange (val) {
      this.onecardataList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i][0].NAME == val) {
          this.onecardataList = this.onecardataList.concat(this.dataList[i]);
        }
      }
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = newMap();
      this.map.centerAndZoom(new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别

      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), { anchor: new BMap.Size(20, 20) })
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), { icon: myIcon })
      // this.markerWithSlider.disableMassClear()
      // this.map.addOverlay(this.markerWithSlider)
      const _this = this
      // 缩放屏幕
      this.map.addEventListener('zoomend', function (e) {
        console.log("地图缩放至：" + this.getZoom() + "级");
        var lineWidth = 2;
        if (this.getZoom() > 16) {
          lineWidth = 3
        }
        if (this.getZoom() < 15) {
          lineWidth = 1
        }
        _this.MapV.roadLayer.update({
          options: {
            lineWidth: lineWidth,
          } // 修改配置
        });

        if (this.getZoom() > 16) {
          _this.MapV.roadNameLayer.show()
        } else {
          _this.MapV.roadNameLayer.hide()
        }
      });
    },
    // 获得分组列表
    async getGroupingList () {
      var url = 'DataListCompany/GetClientYX?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.groupingList = data
      this.CLIENT_NAME = data[0].CLIENT_NO

    },
    // 获得道路列表
    async getRoadList (val) {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      var url = 'RubbishVehicle/GetWorkerRoadHistoryForRoad?ClientNo=' + val + '&date=' + this.selectDay // zxdata
      let { data } = await this.$Http.get(url)
      this.roadList = data
      if (data.length) {
        this.RoadName = data[0].RoadName
      } else {
        this.$message.warning('未查询到此区域道路')
      }
    },
    // 获得人员列表
    async getWorkerList (val) {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      var url = 'DataListCompany/GetRoadInfoYXName?ClientNo=' + val + '&WorkDate=' + this.selectDay // zxdata
      let { data } = await this.$Http.get(url)
      this.workerList = data
      if (data.length) {
        this.LICENSE_PLATE = data[0].LICENSE_PLATE
      } else {
        this.$message.warning('未查询到此区域人员')
      }
    },
    // 选定时间,获取车辆数据列表
    async getcarDataList () {
      if (this.$refs.RoadName.value == null || this.$refs.RoadName.value == 'undefined') {
        this.$message.error('未选择道路');
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        RoadName: this.$refs.RoadName.value,
        ClientNo: localStorage.getItem('CLIENT_NO')
      }
      const { data } = await this.$Http.get('DataListCompany/GetRoadWorkerInfo', { params })
      if (data.length != 0) {
        this.carList = data
      } else {
        this.$message.error('未获取到车辆');
      }
    },
    // 获取人员
    async getDataListWorker () {
      if (this.$refs.workername.value == null || this.$refs.workername.value == 'undefined') {
        this.$message.error('未选择人员');
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        Name: this.$refs.workername.value,
        ClientNo: this.CLIENT_NAME
      }
      console.log(params)
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      const { data } = await this.$Http.get('DataListCompany/GetCleanerRoadTrackGroupren', { params })
      loading.close()
      if (data.length != 0) {
        this.dataList = data
        this.setTime.show = false
        this.setSlider.max = this.dataList.length
        this.drawPicture(18)
      } else {
        this.$message.error('未获取到轨迹');
      }
    },
    // 获取支路等农村道路坐标点
    async getVillageRoadInfo () {
      var url = 'RubbishVehicle/getVillageRoadInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&teamName=&wokerName='
      let { data } = await this.$Http.get(url)
      // eventBus.$emit('mapVillageRoadInfo', data)
      this.Data.arrayVillageRoad = data;
      this.drawRoad()
    },
    // 选定时间,获取道路轨迹数据列表
    async getDataList () {
      if (this.$refs.RoadName.value == null || this.$refs.RoadName.value == 'undefined') {
        this.$message.error('未选择道路');
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        RoadName: this.$refs.RoadName.value,
        ClientNo: this.CLIENT_NAME
      }
      console.log(params)
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      const { data } = await this.$Http.get('DataListCompany/GetCleanerRoadTrackGroup', { params })
      loading.close()
      if (data.length != 0) {
        this.dataList = data
        this.setTime.show = false
        this.setSlider.max = this.dataList.length
        console.log('daolu',this.dataList)
        this.drawPicture(18)
      } else {
        this.$message.error('未获取到轨迹');
      }
    },
    // 选定时间,获取全区轨迹数据列表
    async getDataListAll () {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        ClientNo: this.CLIENT_NAME
      }
      console.log(params)
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      const { data } = await this.$Http.get('DataListCompany/GetWorkerAreaTrackGroup', { params })
      loading.close()
      if (data.length != 0) {
        this.dataList = data
        this.setTime.show = false
        this.setSlider.max = this.dataList.length
        this.drawPicture(13)
      } else {
        this.$message.error('未获取到轨迹');
      }
    },
    // 获取两个点的角度
    // getAngle (lng1, lat1, lng2, lat2) {
    //   const a = (90 - lat2) * Math.PI / 180
    //   const b = (90 - lat1) * Math.PI / 180
    //   const AOC_BOC = (lng2 - lng1) * Math.PI / 180
    //   const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
    //   const sinc = Math.sqrt(1 - cosc * cosc)
    //   const sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc
    //   const A = Math.asin(sinA) * 180 / Math.PI
    //   let res = 0
    //   if (lng2 > lng1 && lat2 > lat1) res = A
    //   else if (lng2 > lng1 && lat2 < lat1) res = 180 - A
    //   else if (lng2 < lng1 && lat2 < lat1) res = 180 - A
    //   else if (lng2 < lng1 && lat2 > lat1) res = 360 + A
    //   else if (lng2 > lng1 && lat2 === lat1) res = 90
    //   else if (lng2 < lng1 && lat2 === lat1) res = 270
    //   else if (lng2 === lng1 && lat2 > lat1) res = 0
    //   else if (lng2 === lng1 && lat2 < lat1) res = 180
    //   return res
    // },
    // 打开数据列表
    openDataList () {
      this.getcarDataList();
      this.dataListDialog = true
      this.getDataList();
    },
    //截屏保存成图片
    async savepic () {
      let canvas = document.querySelector('.track_the_playback');
      let that = this;
      html2canvas(canvas, {
        useCORS: true, tainttest: true,
        allowTaint: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight
      }).then(function (canvas) {
        let type = 'png';
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, 'jpeg');
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return 'image/' + r;
        };
        imgData = imgData.replace(_fixType(type), 'image/octet-stream');
        let filename = "道路轨迹图片" + '.' + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile (data, filename) {
      let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    },
    //画出整个轨迹
    drawPicture (mapZoom) {
      // this.map.clearOverlays()
      // this.hshmap.clear()
      var offSet = 0.0;
      var offRight = true;

      for (var i = 0; i < this.dataList.length; i++) {
        if ((this.dataList[i][0].WorkerType == "环卫工人" && this.linevalue.grcheck)) {
          switch (this.dataList[i][0].WorkerType) {
            case "环卫工人":
              offSet = this.linevalue.grvalue * 0.00001;
              offRight = true;
              break;
          }
          var temp = [];
          for (var Hg = 0; Hg < this.dataList[i].length; Hg++) {
            var changMax = this.dataList[i][0].changeMax;
            //第一个点
            if (Hg == 0) {
              temp.push(this.getCorrentVehicleInfoThree(this.dataList[i][Hg], this.dataList[i][Hg], this.dataList[i][Hg + 2], offSet, offRight, changMax));
            }
            //最后一个点
            else if (Hg == this.dataList[i].length - 1) {
              temp.push(this.getCorrentVehicleInfoThree(this.dataList[i][Hg - 2], this.dataList[i][Hg], this.dataList[i][Hg], offSet, offRight, changMax));
            }
            else {
              temp.push(this.getCorrentVehicleInfoThree(this.dataList[i][Hg - 1], this.dataList[i][Hg], this.dataList[i][Hg + 1], offSet, offRight, changMax));
            }
          }
          this.dataList[i] = temp;
        }

      }

      // for (var i = 0; i < this.dataList.length; i++) {

      //   if ((this.dataList[i][0].WorkerType == "环卫工人" && this.linevalue.grcheck)) {
      //     var pointArr = []
      //     for (const item1 of this.dataList[i]) {
      //       pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat))
      //     }
      //     let color = '#FF0000';
      //     var polyline = new BMap.Polyline(pointArr, {
      //       strokeColor: color,
      //       strokeWeight: this.linevalue.grvalue,
      //       strokeOpacity: 2
      //     });
      //     this.map.addOverlay(polyline);
      //     //  if(!this.hshmap.has(this.dataList[i][0].LICENSE_PLATE)){
      //     //     this.hshmap.set(this.dataList[i][0].LICENSE_PLATE,1);
      //     //     var point = new BMap.Point(this.dataList[i][0].NewLng, this.dataList[i][0].NewLat)
      //     //     var markerImage = new BMap.Icon(DirectionImg, new BMap.Size(50, 50))
      //     //     var marker = new BMap.Marker(point, { icon: markerImage })
      //     //     var label = new BMap.Label(this.dataList[i][0].LICENSE_PLATE+this.dataList[i][0].ORIENTATION_TIME, { offset: new BMap.Size(-10, 50) })
      //     //     marker.setLabel(label)
      //     //     this.map.addOverlay(marker)
      //     //   }
      //   }
      // }
      // }
      var data = [];
      var boundPoints = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if ((this.dataList[i][0].WorkerType == "环卫工人" && this.linevalue.grcheck)) {
          var pointArr = []
          for (const item1 of this.dataList[i]) {
            // pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat))
            pointArr.push([item1.NewLng, item1.NewLat])
            boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat))
          }
          data.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        }
      }
      if (this.MapV.dataSetWorkerLine) {
        this.MapV.dataSetWorkerLine.set(data);
      } else {
        this.MapV.dataSetWorkerLine = new mapv.DataSet(data);
        this.MapV.roadLayer = new mapv.baiduMapLayer(this.map, this.MapV.dataSetWorkerLine, {
          zIndex: 2,
          strokeStyle: '#FF0000',
          lineWidth: this.linevalue.grvalue,
          lineJoin: 'round',
          draw: 'simple'
        });
      }
      // this.map.centerAndZoom(new BMap.Point(this.dataList[0][0].NewLng, this.dataList[0][0].NewLat), this.mapZoom)
      // this.map.centerAndZoom(new BMap.Polyline(boundPoints).getBounds().getCenter(), mapZoom);
      this.map.setViewport(boundPoints);
    },
    //进行轨迹点偏移
    getCorrentVehicleInfoThree (info1, info2, info3, distance, rightOff, changeMax) {
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offX = info3.NewLng * 1 - info1.NewLng * 1;
      //两点纬度差
      var offY = info3.NewLat * 1 - info1.NewLat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.NewLng != info1.NewLng) {
        offAngel = Math.atan2(Math.abs(offX), Math.abs(offY));
      }


      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      }
      else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      }
      else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      }

      else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      }
      else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      switch (changeMax) {
        case "X+":
          facY = -1;
          break;

        case "X-":
          facY = 1;
          break;

        case "X0":
          facY = -1;
          break;

        case "Y+":
          facX = 1;
          break;

        case "Y-":
          facX = -1;
          break;

        case "Y0":
          facX = 1;
          break;
      }

      facX = -1.0 * facX;
      facY = -1.0 * facY;
      //计算偏移
      offLng = distance * Math.cos(offAngel);
      offLat = distance * Math.sin(offAngel);


      info.NewLng = info2.NewLng * 1 + facX * offLng;
      info.NewLat = info2.NewLat * 1 + facY * offLat;
      info.ORIENTATION_TIME = info2.ORIENTATION_TIME;
      info.VID = info2.VID;
      info.WorkerType = info2.WorkerType;
      info.NAME = info2.NAME;
      info.RoadName = info2.RoadName;
      return info;
    },
    drawRoad () {
      var data = [];
      var dataText = [];
      var coordinates = [];
      for (var i = 0; i < this.Data.arrayVillageRoad.length; i++) {
        var item = this.Data.arrayVillageRoad[i];
        coordinates.push([item.LONGITUDE, item.LATITUDE])
        if ((i + 1) < this.Data.arrayVillageRoad.length) {
          if (item.NAME != this.Data.arrayVillageRoad[i + 1].NAME) {
            data.push({
              geometry: {
                type: 'LineString',
                coordinates: coordinates
              },
            });
            dataText.push({
              geometry: {
                type: 'Point',
                coordinates: coordinates[parseInt(coordinates.length / 2)]
              },
              text: item.NAME
            });
            coordinates = []
          }
        } else {
          data.push({
            geometry: {
              type: 'LineString',
              coordinates: coordinates
            },
          });
          dataText.push({
            geometry: {
              type: 'Point',
              coordinates: coordinates[parseInt(coordinates.length / 2)]
            },
            text: item.NAME
          });
          // data.push({
          //   geometry: {
          //     type: 'LineString',
          //     coordinates: coordinates
          //   }
          // });
        }
      }
      var dataSet = new mapv.DataSet(data);
      var options = {
        zIndex: -1,
        strokeStyle: 'rgba(100,100,100)',
        lineWidth: 3,
        lineJoin: 'round',
        draw: 'simple'
      }
      this.MapV.roadLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
      this.MapV.roadNameLayer = new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataText), {
        draw: 'text',
        size: 15,
        fillStyle: 'rgba(18,58,99)',
        // avoid: true, // 开启文本标注避让
        textBaseline: 'middle',
        offset: { // 文本便宜值
          x: 0,
          y: 13
        }
      });
      if (this.map.getZoom() > 16) {
        this.MapV.roadNameLayer.show()
      } else {
        this.MapV.roadNameLayer.hide()
      }
      this.map.centerAndZoom(new BMap.Point(this.Data.arrayVillageRoad[0].LONGITUDE, this.Data.arrayVillageRoad[0].LATITUDE), this.mapZoom)
    },
    // 开始播放道路作业轨迹
    start () {
      this.dataListDialog = false
      this.getDataList();
    },
    // 开始播放人员作业轨迹
    startworker () {
      this.dataListDialog = false
      this.getDataListWorker();
    },
    // 开始播放全区作业轨迹
    startAll () {
      this.dataListDialog = false
      this.getDataListAll();
    },
    // 清除轨迹
    clear () {
      this.stop()
      this.ary = []
      this.dataCurrentIndex = 0
      this.markerWithSlider.setPosition(new BMap.Point(0, 0))
      this.map.clearOverlays()
    },
  }
}
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 16px;
        font-weight: bold;
        height: 39px;
        line-height: 38px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
    .person_legend {
      width: 550px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: rgba(255, 0, 0, 0.9);
      padding: 5px 10px 0 10px;
      border-radius: 5px;
      h3 {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #333;
        margin-bottom: 5px;
        i {
          float: right;
          cursor: pointer;
          &:before {
            color: #666;
          }
        }
      }
      p {
        // text-align: center;
        color: #333;
        float: left;
        width: 14%;
        margin-bottom: 8px;
        span {
          display: block;
          text-align: center;
          &:first-child {
            img {
              // background-size: 30px 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.settingWindow {
  height: calc(~'100% - 32px');
}

.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.buttonII {
  color: #007acc;
  font-size: 14px;
  font-weight: bold;
  height: 22px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 7px 4px 7px;
  margin-left: 8px;
  border: 1px solid #007acc;
  border-radius: 4px;
}
</style>
